<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>compositionstart event</title>
  </head>
  <body>
    <div id="app">
      <!-- <input type="text" /> -->
      <div class="control">
        <label for="name"
          >On macOS, click in the textbox below,<br />
          then type <kbd>option</kbd> + <kbd>`</kbd>, then <kbd>a</kbd>:</label
        >
        <input type="text" id="example" name="example" />
      </div>

      <div class="event-log">
        <label>Event log:</label>
        <textarea
          readonly
          class="event-log-contents"
          rows="8"
          cols="25"
        ></textarea>
        <button class="clear-log">Clear</button>
      </div>
    </div>
    <script>
      //   const inputElement = document.querySelector('input[type="text"]');

      //   inputElement.addEventListener("compositionstart", (event) => {
      //     console.log(`generated characters were: ${event.data}`);
      //   });

      const inputElement = document.querySelector('input[type="text"]');
      const log = document.querySelector(".event-log-contents");
      const clearLog = document.querySelector(".clear-log");

      clearLog.addEventListener("click", () => {
        log.textContent = "";
      });

      function handleEvent(event) {
        // console.log(event.target.composing);

        log.textContent = log.textContent + `${event.type}: ${event.data}\n`;
      }
      inputElement.addEventListener("input", function (e) {
        console.log(e.target.value);
      });
      inputElement.addEventListener("compositionstart", handleEvent);
      //   inputElement.addEventListener("compositionupdate", handleEvent);
      inputElement.addEventListener("compositionend", handleEvent);
    </script>
  </body>
</html>
